<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 这个地方必须得引入，否则会出现页面可缩放的问题-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>首页</title>

    <!-- weui的相关css样式，需要引入-->
    <link rel="stylesheet" href="../css/weui.min.css">
    <link rel="stylesheet" href="../css/jquery-weui.min.css">

    <style>
        .placeholder {
            margin: 5px;
            padding: 0 10px;
            background-color: #ebebeb;
            height: 2.3em;
            line-height: 2.3em;
            text-align: center;
            color: #cfcfcf;
        }

        h1 {
            font-weight: 400;
            text-align: center;
            color: #0bb20c;
        }

        /*swiper轮播图*/
        .swiper-container img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>


<!--这块是九宫格的代码-->
<div style="margin: 35px 0;">
    <h1>Grid-九宫格</h1>
</div>
<div class="weui-grids">
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            Button
        </p>
    </a>
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            List
        </p>
    </a>
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            List
        </p>
    </a>
</div>
<div class="weui-grids">
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            Button
        </p>
    </a>
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            List
        </p>
    </a>
    <a href="" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <img src="../images/icon_nav_button.png" alt="">
        </div>
        <p class="weui-grid__label">
            List
        </p>
    </a>
</div>


<!--这块是Flex实现栅格的代码-->
<div style="margin: 35px 0;">
    <h1>Flex-栅格</h1>
</div>

<div class="weui-flex">
    <div class="weui-flex__item">
        <div class="placeholder">weui</div>
    </div>
    <div class="weui-flex__item">
        <div class="placeholder">weui</div>
    </div>
</div>
<div class="weui-flex">
    <div class="weui-flex__item">
        <div class="placeholder">weui</div>
    </div>
    <div class="weui-flex__item">
        <div class="placeholder">weui</div>
    </div>
    <div class="weui-flex__item">
        <div class="placeholder">weui</div>
    </div>
</div>


<!--这块是按钮的代码-->
<div style="margin: 35px 0;">
    <h1>按钮</h1>
</div>

<div class="weui-btn-area">
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary">主按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary weui-btn_disabled">禁用主按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_warn">警告按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_warn weui-btn_disabled">警告按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_default">禁用告警按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_default weui-btn_disabled">禁用默认按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_plain-default">扁平化按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_plain-primary">扁平化主按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_plain-disabled">禁用扁平化按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary weui-btn_mini" style="width: auto">小按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_plain-default weui-btn_mini" style="width: auto">小按钮</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_default weui-btn_loading">Loading...</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary weui-btn_loading">Loading...</a>
    <a href="javascript:void(0);" class="weui-btn weui-btn_warn weui-btn_loading">Loading...</a>
</div>


<!--这块是列表的代码-->
<div style="margin: 35px 0;">
    <h1>列表</h1>
</div>

<!--这个地方可以通过cell的head、body、foot的简写进行记忆，方便易懂，head放图片，body放左侧文字，foot放右侧文字-->
<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
</div>

<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="../images/help.png" style="margin-right: 5px;width: 20px"/></div>
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="../images/help.png" style="margin-right: 5px;width: 20px"/></div>
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
</div>

<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
    <!--这个地方a标签直接充当了div的角色，因此就不需要外层样式为weui-cell的div了-->
    <a href="javascript:void(0);" class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
    <a href="javascript:void(0);" class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
</div>

<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
<div class="weui-cells">
    <a href="javascript:void(0);" class="weui-cell weui-cell_access">
        <div class="weui-cell__hd">
            <img src="../images/help.png" style="width: 20px"/>
        </div>
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
    <a href="javascript:void(0);" class="weui-cell weui-cell_access">
        <div class="weui-cell__hd">
            <img src="../images/help.png" style="width: 20px"/>
        </div>
        <div class="weui-cell__bd">cell standard</div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
</div>

<div class="weui-cells__title">单选列表项</div>
<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="x11">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="x12">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
            <input type="radio" class="weui-check" name="radio1" id="x12" checked="checked">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
    <a href="javascript:void(0);" class="weui-cell weui-cell_link">
        <div class="weui-cell__bd">添加更多</div>
    </a>
</div>

<div class="weui-cells__title">复选列表项</div>
<div class="weui-cells weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="checkbox" name="checkbox1" class="weui-check" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is default for u</p>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="s12">
        <div class="weui-cell__hd">
            <input type="checkbox" name="checkbox1" class="weui-check" id="s12">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p>standard is default for u</p>
        </div>
    </label>
    <a href="javascript:void(0);" class="weui-cell weui-cell_link">
        <div class="weui-cell__bd">添加更多</div>
    </a>
</div>

<!--这块是表单的代码-->
<div style="margin: 35px 0;">
    <h1>表单</h1>
</div>
<div class="weui-cells__title">表单</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">QQ</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入您的QQ号码">
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="tel" placeholder="请输入您的手机号码">
        </div>
        <div class="weui-cell__ft">
            <button class="weui-vcode-btn">获取验证码</button>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label for="" class=weui-label>日期</label>
        </div>
        <div class=weui-cell__bd>
            <input class="weui-input" type="date" value="">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label" for="">时间</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="datetime-local" placeholder="" value="">
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" placeholder="请输入验证码">
        </div>
        <div class="weui-cell__ft">
            <img class="weui-vcode-img" src="../images/vcode.jpg">
        </div>
    </div>
    <div class="weui-cells__tips">
        底部的说明文字
    </div>
</div>

<div class="weui-cells__title">表单报错</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_warn">
        <div class="weui-cell__hd">
            <label class="weui-label" for="">卡号</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入正确的卡号">
        </div>
        <div class="weui-cell__ft">
            <i class="weui-icon-warn"></i>
        </div>
    </div>
</div>

<div class="weui-cells__title">开关</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">
            标题文字
        </div>
        <div class="weui-cell__ft">
            <input class="weui-switch" type="checkbox">
        </div>
    </div>
    <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">兼容IE Edge版本</div>
        <div class="weui-cell__ft">
            <label class="weui-switch-cp" for="switchCP">
                <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked">
                <div class="weui-switch-cp__box"></div>
            </label>
        </div>
    </div>
</div>
<div class="weui-cells__title">文本框</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请输入文本">
        </div>
    </div>
</div>
<div class="weui-cells__title">文本域</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
            <div class="weui-textarea-counter"><span>0</span>/200</div>
        </div>
    </div>
</div>

<div class="weui-cells__title">选择</div>
<div class="weui-cells">
    <!--这个是前选择，后面选择国家的时候使用的是后选择-->
    <div class="weui-cell weui-cell_select weui-cell_select-before">
        <div class="weui-cell__hd">
            <select class="weui-select" name="select2">
                <option value="1">+86</option>
                <option value="2">+80</option>
                <option value="3">+84</option>
                <option value="4">+87</option>
            </select>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号码">
        </div>
    </div>
</div>
<div class="weui-cells__title">选择</div>
<div class="weui-cells">
    <div class="weui-cell weui-cell_select">
        <div class="weui-cell__bd">
            <select class="weui-select" name="select1">
                <option value="1">微信</option>
                <option value="2">QQ</option>
                <option value="3">Email</option>
            </select>
        </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label class="weui-label">国家/地区</label>
        </div>
        <div class="weui-cell__bd">
            <select class="weui-select" name="select2">
                <option value="1">中国</option>
                <option value="2">美国</option>
                <option value="3">英国</option>
            </select>
        </div>
    </div>
</div>
<label class="weui-agree" for="weuiAgree">
    <input class="weui-agree__checkbox" id="weuiAgree" type="checkbox">
    <span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a></span>
</label>
<div class="weui-btn-area">
    <a href="javascript:void(0);" class="weui-btn weui-btn_primary">确定</a>
</div>


<!--这块是文件上传的代码-->
<div style="margin: 35px 0;">
    <h1>Uploader-文件上传</h1>
</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">图片上传</p>
                    <div class="weui-uploader__info">0/2</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                        <li class="weui-uploader__file" style="background-image:url(../images/pic_160.png) "></li>
                        <li class="weui-uploader__file" style="background-image:url(../images/pic_160.png) "></li>
                        <li class="weui-uploader__file" style="background-image:url(../images/pic_160.png) "></li>
                        <li class="weui-uploader__file weui-uploader__file_status"
                            style="background-image: url(../images/pic_160.png)">
                            <div class="weui-uploader__file-content">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </li>
                        <li class="weui-uploader__file weui-uploader__file_status"
                            style="background-image: url(../images/pic_160.png)">
                            <div class="weui-uploader__file-content">50%</div>
                        </li>
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--这块是全屏预览图片，因为是全屏展示，所以增加了一个按钮，上面的点击事件是用来显示全屏图片的-->
<div style="margin:35px 0">
    <h1>Gallery-全屏预览图片</h1>
</div>

<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="showImgBtn">显示全屏图片</a>
</div>

<div class="weui-gallery" style="display: none" id="imgfullscreen">
    <span class="weui-gallery__img" style="background-image: url(../images/pic_160.png)"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:void(0);" class="weui-gallery__del">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

<!--滑块代码，下面还有段JS初始化代码及回调-->
<div style="margin: 35px 0;">
    <h1>Slider-滑块</h1>
</div>
<div class="weui-slider-box" id="slider1">
    <div class="weui-slider">
        <div class="weui-slider__inner">
            <div class="weui-slider__track" style="width: 30%"></div>
            <div class="weui-slider__handler" style="left: 30%"></div>
        </div>
    </div>
    <div id="sliderValue" class="weui-slider-box__value">75%</div>
</div>

<!--这块是消息页面代码-->
<div style="margin: 35px 0;">
    <h1>消息界面</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="msg.html">打开消息界面</a>
</div>

<!--这块是进度（progress）条代码-->
<div style="margin: 35px 0">
    <h1>Progress-进度条</h1>
</div>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 50%"></div>
    </div>
    <a class="weui-progress__opr" href="javascript:void(0);">
        <i class="weui-icon-cancel"></i>
    </a>
</div>
<br>
<div class="weui-progress">
    <div class="weui-progress__bar">
        <div class="weui-progress__inner-bar js_progress" style="width: 80%"></div>
    </div>
    <a class="weui-progress__opr" href="javascript:void(0);">
        <li class="weui-icon-cancel"></li>
    </a>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="uploadProgressBtn">上传</a>
</div>

<div style="margin: 35px 0;">
    <h1>对话框</h1>
</div>
<div class="weui-flex" style="margin: 5px 0;">
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="alertBtn1">Alert</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="alertBtn2">Alert</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="alertBtn3">Alert</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="alertBtn4">Alert</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="alertBtn5">Alert</a>
    </div>
</div>
<div class="weui-flex" style="margin: 5px 0;">
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="confirmBtn1">confirm</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="confirmBtn2">confirm</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="confirmBtn3">confirm</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="confirmBtn4">confirm</a>
    </div>
</div>
<div class="weui-flex" style="margin: 5px 0;">
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="prompt1">Prompt</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="prompt2">Prompt</a>
    </div>
</div>

<div class="weui-flex" style="margin: 5px 0;">
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="loginPrompt1">显示登录弹窗</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="loginPrompt2">显示登录弹窗</a>
    </div>
</div>

<div class="weui-flex" style="margin: 5px 0;">
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="modalWindow">显示自定义对话框</a>
    </div>
    <div class="weui-flex__item">
        <a class="weui-btn weui-btn_primary" id="closeModal">自定义按钮关闭</a>
    </div>
</div>

<!--这块是Loadmore的代码-->
<div style="margin: 35px 0">
    <h1>Loadmore</h1>
</div>
<div class="weui-loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">加载中...</span>
</div>
<div class="weui-loadmore weui-loadmore_line">
    <span class="weui-loadmore__tips">暂无数据</span>
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
    <span class="weui-loadmore__tips"></span>
</div>

<!--这块是Action Sheet的代码-->
<div style="margin: 35px 0;">
    <h1>Action Sheet</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="actionSheetBtn">显示ActionSheet</a>
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="actionSheetBkgBtn">自定义背景的ActionSheet</a>
</div>

<!--这块是Toast的代码-->
<div style="margin: 35px 0">
    <h1>Toast显示临时信息</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="toastSuccess">显示Toast成功</a>
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="toastCancel">显示Toast取消</a>
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="toastForbidden">显示Toast禁止</a>
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="toastText">显示纯文本</a>
    <a class="weui-btn weui-btn_primary" href="javascript:void(0);" id="toastLoading">显示Loading</a>
</div>
<!--这块是loading加载的时候显示的DIV，配合toast的loading使用的-->
<div id="loadingToast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="visibility: visible;opacity: 1">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>

<!--这块是顶部tabbar的代码-->
<div style="margin: 35px 0;">
    <h1>Toptip-顶部提示</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary weui-btn_mini" id="toptipSuccess">显示成功</a>
    <a class="weui-btn weui-btn_warn weui-btn_mini" id="toptipFail">显示失败</a>
    <a class="weui-btn weui-btn_warn weui-btn_mini" id="toptipWarn">显示警告</a>
</div>

<div style="margin: 35px 0">
    <h1>Tabbar-导航栏</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="tabbar.html">跳转到底部导航栏界面</a>
    <a class="weui-btn weui-btn_primary" href="toptabbar.html">跳转到顶部导航栏界面</a>
</div>


<!--这块是Panel 面板的代码-->
<div style="margin: 35px 0">
    <h1>Panel-面板</h1>
</div>

<div class="weui-panel">
    <div class="weui-panel__hd">图文组合列表</div>
    <div class="weui-panel__bd">
        <a class="weui-media-box weui-media-box_appmsg" href="javascript:void(0);">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="../images/panel.png">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">标题一</h4>
                <p class="weui-media-box__desc">这块是显示文字的详细内容</p>
            </div>
        </a>
        <a class="weui-media-box weui-media-box_appmsg" href="javascript:void(0);">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="../images/panel.png">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">标题二</h4>
                <p class="weui-media-box__desc">这块是显示文字的详细内容</p>
            </div>
        </a>
    </div>
    <div class="weui-panel__ft">
        <a class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>
    </div>
</div>

<div class="weui-panel">
    <div class="weui-panel__hd">文字组合列表</div>
    <div class="weui-panel__bd">
        <a class="weui-media-box weui-media-box_appmsg" href="javascript:void(0);">
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">标题三</h4>
                <p class="weui-media-box__desc">这块是显示文字的详细内容</p>
            </div>
        </a>
        <a class="weui-media-box weui-media-box_appmsg" href="javascript:void(0);">
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">标题三</h4>
                <p class="weui-media-box__desc">这块是显示文字的详细内容</p>
            </div>
        </a>
    </div>
    <div class="weui-panel__ft"><!--这个样式没找到，但是下面的Cell样式控制了链接的显示-->
        <div class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </div>
    </div>
</div>

<div class="weui-panel">
    <div class="weui-panel__hd">文字列表附来源</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">标题一</h4>
            <p class="weui-media-box__desc">这块是显示文字的详细内容</p>
            <ul class="weui-media-box__info">
                <li class="weui-media-box__info__meta">文字来源</li>
                <li class="weui-media-box__info__meta">时间</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其他信息</li>
            </ul>
        </div>
    </div>
</div>

<!--这块是Preview的代码-->
<div style="margin: 35px 0">
    <h1>Preview-预览</h1>
</div>
<div class="weui-form-preview">
    <div class="weui-form-preview__hd">
        <label class="weui-form-preview__label">付款金额</label>
        <em class="weui-form-preview__value">￥2400.00</em>
    </div>
    <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
            <div class="weui-form-preview__label">商品数量</div>
            <div class="weui-form-preview__value">3个</div>
        </div>
        <div class="weui-form-preview__item">
            <div class="weui-form-preview__label">商品描述</div>
            <div class="weui-form-preview__value">这是个很长很长的标题这是个很长很长的标题这是个很长很长的标题这是个很长很长的标题</div>
        </div>
    </div>
    <div class="weui-form-preview__ft">
        <a class="weui-form-preview__btn weui-form-preview__btn_default" href="javascript:void(0);">辅助操作</a>
        <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary">操作</button>
    </div>
</div>

<!--这块是Footer的代码-->
<div style="margin: 35px 0">
    <h1>Footer-简单页脚</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="footer.html">打开页脚界面</a>
</div>

<!--这块是图标的代码-->
<div style="margin: 35px 0">
    <h1>Icon-图标</h1>
</div>
<div style="text-align: center">
    <i class="weui-icon-success weui-icon_msg"></i>
    <i class="weui-icon-info weui-icon_msg"></i>
    <i class="weui-icon-warn weui-icon_msg-primary"></i>
    <i class="weui-icon-warn weui-icon_msg"></i>
    <i class="weui-icon-waiting weui-icon_msg"></i>
</div>
<div style="text-align: center">
    <i class="weui-icon-success"></i>
    <i class="weui-icon-success-no-circle"></i>
    <i class="weui-icon-circle"></i>
    <i class="weui-icon-warn"></i>
    <i class="weui-icon-download"></i>
    <i class="weui-icon-info"></i>
    <i class="weui-icon-search"></i>
    <i class="weui-icon-cancel"></i>
</div>

<!--下拉刷新的代码-->
<div style="margin: 35px 0">
    <h1>下拉刷新</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="pulldownrefresh.html">跳转下拉刷新页面</a>
    <a class="weui-btn weui-btn_primary" href="pulldownwithtab.html">跳转下拉刷新结合TAB</a>
</div>


<!--滚动加载-->
<div style="margin: 35px 0">
    <h1>滚动加载</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn bg-primary" href="rollload.html">跳转滚动加载页面</a>
    <a class="weui-btn weui-btn_primary" href="rolldownwithtab.html">跳转滚动结合TAB页面</a>
</div>

<!--Swiper 轮播代码-->
<div style="margin:35px 0">
    <h1>Swiper-轮播</h1>
</div>
<div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="http://idangero.us/swiper/api/#.VjtIEK4rLyU" target="_blank"><img
                    src="../images/swiper/swiper-1.jpg" alt="暗藏玄机，看你是否能发现"></a>
        </div>
        <div class="swiper-slide">
            <a href="http://idangero.us/swiper/api/#.VjtIEK4rLyU" target="_blank"><img
                    src="../images/swiper/swiper-2.jpg" alt="暗藏玄机，看你是否能发现"></a>
        </div>
        <div class="swiper-slide">
            <a href="http://idangero.us/swiper/api/#.VjtIEK4rLyU" target="_blank"><img
                    src="../images/swiper/swiper-3.jpg" alt="暗藏玄机，看你是否能发现"></a>
        </div>
    </div>
</div>

<div style="margin: 35px 0">
    <h1>Poto Browser</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="photo_browser.html">打开带文案的图片界面</a>
</div>

<!--这块是日历的代码-->
<div style="margin: 35px 0;">
    <h1>日历</h1>
</div>

<div class="weui-cells__title">日期选择器</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">日期</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请选择日期" id="date-picker">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">中文日期</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="请选择中文日期" id="date-picker-cn">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">多选日期</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" placeholder="这个是多选日期" id="date-picker-mulity">
        </div>
    </div>

</div>

<div style="margin: 35px 0">
    <h1>内联日历</h1>
</div>
<div class="weui-cell">
    <div class="weui-cell__hd">
        <label class="weui-label">内联日期选择</label>
    </div>
    <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请选择日期" id="innerline-date">
    </div>
</div>
<div id="date3"></div>

<!--这块是Picker的代码-->
<div style="margin: 35px 0">
    <h1>Picker</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="picker.html">跳转Picker界面</a>
</div>

<!--这块是datepicker的代码-->
<div style="margin: 35px auto">
    <h1>日期选择-datepicker</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="datepicker.html">跳转日期时间选择页面</a>
</div>

<div style="margin: 35px auto">
    <h1>地址选择器-City Picker</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="addresspicker.html">跳转地址选择界面</a>
</div>

<!--这块是通知-Notification的代码-->
<div style="margin: 35px auto">
    <h1>通知-Notification</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" id="showNotoficationBtn">显示通知</a>
</div>
<!--这块是通知-Notification的代码-->

<!--Select 选择-->
<div style="margin: 35px auto">
    <h1>Select-选择</h1>
</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">职业</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="job-select">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">手机</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="phone-select">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">爱好</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="fav-select">
        </div>
    </div>

</div>
<!--Select 选择-->

<!--这块是Popup的代码-->
<div style="margin: 35px auto">
    <h1>Popup</h1>
</div>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="popup.html">跳转Popup页面</a>
</div>

<!--fastclick代码-->
<div style="margin: 35px auto">
    <h1>fastclick</h1>
</div>
<div class="weui-article">
    <p>iOS 系统下默认的 click 事件会有300毫秒的延迟，这个延迟是iOS系统的特性而不是jQuery WeUI设定的，可以使用 fastclick 来消除这个延迟。

        jQuery WeUI 是不包含 fastclick 的，你只需要按照标准的用法引用并初始化即可，可以参考以下代码：
        在官方 demos 中是引入了 fastclick ，可以参考其中的代码。

        关于更多 fastclick 相关的文档，请移步其官网 https://github.com/ftlabs/fastclick</p>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-weui.min.js"></script>
<!--轮播的时候，必须得引用swiper的js文件-->
<script src="../js/swiper.min.js"></script>

<!--初始化加载-->
<script>
    $(function () {

//    Gallery点击按钮显示全屏查看图片
        $('#showImgBtn').on('click', function () {
            $('#imgfullscreen')[0].style.display = 'block';
        });

//    Gallery点击图片之后，全屏效果消失
        $('#imgfullscreen').on('click', function () {
            $('#imgfullscreen')[0].style.display = 'none';
        });

        //Progress-进度条的按钮
        var $progress = $('.js_progress');
        var progress = 0;
        $("#uploadProgressBtn").on('click', function () {
            if ($("#uploadProgressBtn").hasClass("weui-btn_disabled")) return;
            $("#uploadProgressBtn").addClass("weui-btn_disabled");
            next();
        })

        function next() {
            if (progress > 100) {
                progress = 0;
                $("#uploadProgressBtn").removeClass('weui-btn_disabled');
                $(".weui-icon-cancel").removeClass("weui-icon-cancel").addClass("weui-icon-success");
                return;
            }
            $progress.css({width: progress + '%'});
            progress = ++progress;
            setTimeout(next, 20);
        }


        //alert按钮操作
        $("#alertBtn1").on('click', function () {
            $.alert("自定义内容");
        });
        $("#alertBtn2").on('click', function () {
            $.alert("自定义内容", "自定义的标题");
        });
        $("#alertBtn3").on('click', function () {
            $.alert({
                title: '自定义的标题',
                text: '自定义的内容',
                onOK: function () {
                    //点击确认
                    $.alert("这个是有回调的alert");
                }
            });
        });
        $("#alertBtn4").on('click', function () {
            $.alert("自定义内容", function () {
                $.alert("这个也是有回调的");
            });
        });
        $("#alertBtn5").on('click', function () {
            $.alert("自定义内容", "自定义标题", function () {
                $.alert("这个是自定义内容和标题和有回调的alert");
            })
        })
        //confirm按钮操作
        $("#confirmBtn1").on('click', function () {
            $.confirm("自定义内容的");
        });
        $("#confirmBtn2").on('click', function () {
            $.confirm("自定义内容的", "自定义标题的");
        });
        $("#confirmBtn3").on('click', function () {
            $.confirm("自定义内容", function () {
                $.alert("点击确定的回调")
            }), function () {
                $.alert("点击取消的回调");//这个不知道为什么好像不好使
            }
        });
        $("#confirmBtn4").on('click', function () {
            $.confirm({
                title: "自定义标题",
                text: "自定义内容",
                onOK: function () {
                    $.alert("点击确定的回调");
                },
                onCancel: function () {
                    $.alert("点击取消的回调");
                }
            });
        });
        //prompt按钮事件
        $("#prompt1").on('click', function () {
            $.prompt("自定义的内容", function (text) {
                $.alert(text);
            }, function () {
                $.alert("这个是取消回调走的方法");
            })
        });
        $("#prompt2").on('click', function () {
            $.prompt({
                title: "自定义的标题",
                text: "自定义的内容",
                input: "请输入你想输入的内容",
                empty: false,
                onOK: function (input) {
                    $.alert("你输入的内容是" + input);
                },
                onCancel: function () {
                    $.alert("这个是点击取消的时候的回调");
                }
            })
        })
        //登录弹出窗口
        $("#loginPrompt1").on('click', function () {
            $.login("自定义消息", function (username, password) {
                $.alert("您输入的用户名：" + username + "<br>您输入的密码是：" + password);
            }, function () {
                $.alert("点击取消的时候弹出");
            });
        });
        $("#loginPrompt2").on('click', function () {
            $.login({
                title: "自定义的标题",
                text: "自定义的内容",
                username: "polieme", /*默认的用户名*/
                password: "zhangpeng", /*默认的密码*/
                onOK: function (username, password) {
                    $.alert("您输入的用户名是:" + username + "<br>您输入的密码是:" + password);
                },
                onCancel: function () {
                    $.alert("这个是点击取消的时候");
                }

            });
        });
        //自定义弹出窗口
        $("#modalWindow").on('click', function () {
            $.modal({
                title: "自定义标题",
                text: "自定义内容",
                buttons: [{
                    text: "支付宝", onClick: function () {
                        $.alert("点击了支付宝按钮")
                    }
                }, {
                    text: "微信", onClick: function () {
                        $.alert("点击了微信支付");
                    }
                }, {
                    text: "其他", onClick: function () {
                        $.alert("点击了其他按钮");
                    }
                }]
            });
        });
        //自定义关闭Modal窗口
        $("#closeModal").on('click', function () {
            $.modal({
                title: "自定义的标题",
                text: "自定义的内容",
                buttons: [{
                    text: "关闭", onClick: function () {
                        $.closeModal();
                        $.alert("这个是点击关闭按钮的回调");
                    }
                }]
            })
        });

        //ActionSheet JS事件
        $("#actionSheetBtn").on('click', function () {
            $.actions(
                {
                    actions: [{
                        text: "自定义按钮一", onClick: function () {
                            $.alert("点击了自定义按钮一");
                        }
                    }, {
                        text: "自定义按钮二", onClick: function () {
                            $.alert("点击了第二个按钮");
                        }
                    }]
                })
        })
        $("#actionSheetBkgBtn").on('click', function () {
            $.actions({
                actions: [{
                    text: "自定义菜单一", className: "color-primary", onClick: function () {
                        $.alert("点击了自定义菜单一");
                    }
                }, {
                    text: "自定义菜单二", className: "color-success", onClick: function () {
                        $.alert("点击了自定义菜单二");
                    }
                }, {
                    text: "自定义菜单三", className: "color-danger", onClick: function () {
                        $.alert("点击了自定义菜单三");
                    }
                }, {
                    text: "自定义菜单四", className: "color-warning", onClick: function () {
                        $.alert("点击了自定义菜单四");
                    }
                }
                ]
            })
        })

        //Toast的JS代码
        $("#toastSuccess").on('click', function () {
            $.toast("操作成功");
        });
        $("#toastCancel").on('click', function () {
            $.toast("取消操作", "cancel");
        })
        $("#toastForbidden").on('click', function () {
            $.toast("禁止操作", "forbidden")
        })
        $("#toastText").on('click', function () {
            $.toast.prototype.defaults.duration = 5000;//可以通过这个参数设置显示的时长
            $.toast("显示纯文本内容", "text")
        })
        $("#toastLoading").on('click', function () {
            var $loadingToast = $('#loadingToast');
            if ($loadingToast.css('display') != 'none') return;


            $loadingToast.fadeIn(1000);
            setTimeout(function () {
                $loadingToast.fadeOut(1000);
            }, 2000);
        })

        //Toptip的JS代码
        $("#toptipSuccess").on('click', function () {
            $.toptip("操作成功", "success");
        })
        $("#toptipFail").on('click', function () {
            $.toptip("操作失败", "error");
        })
        $("#toptipWarn").on('click', function () {
            $.toptip("警告", 2000, "warning");//可以设置toptip的显示时间
        })

        //轮播Swiper的JS代码
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 2000
        });


        //Notification的JS代码
        $("#showNotoficationBtn").on('click', function () {
            $.notification({
                title: "Baby",
                text: "I miss you",
                media: "<img src='http://jqweui.com/dist/demos/images/present.png'>",
                data: "123",
                time: 2000,//设置自动隐藏的时间
                onClick: function (data) {//点击的时候的调取函数
                    $.alert("Click" + data)
                },
                onClose: function (data) {//自动关闭的时候调取的函数
                    $.alert("Close" + data);
                }
            })
        });

        //
        $("#job-select").select({
            title: "请选择您的职业",
            items: ["法官", "码农", "医生", "猎人", "记者"]
        })

        $("#phone-select").select({
            title: "请选择您的手机",
            items: [
                {
                    title: "iPhone 3GS",
                    value: "001"
                },
                {
                    title: "iPhone 4",
                    value: '002'
                }, {
                    title: 'iPhone4S',
                    value: '003'
                },{
                    title: "iPhone 5",
                    value: "004"
                },
                {
                    title: "iPhone 5S",
                    value: '005'
                }, {
                    title: 'iPhone6',
                    value: '006'
                }, {
                    title: 'iPhone6S',
                    value: '007'
                }, {
                    title: 'iPhone7',
                    value: '008'
                }
            ]
        })

        $("#fav-select").select({
            title: "您的爱好",
            multi: true,
            min:2,
            max:3,
            items: [
                {
                    title: "画画",
                    value: 1
                },
                {
                    title: "打球",
                    value: 2
                },
                {
                    title: "唱歌",
                    value: 3
                },
                {
                    title: "游泳",
                    value: 4
                },{
                    title: "睡觉",
                    value: 5
                }
            ],
            beforeClose:function(values,titles){
                if(values.indexOf("5")!= -1){
                    $.toast("不能选择睡觉","cancel");
                    return false;
                }
            }
        })

    });

</script>

<!--点击跳转之后，返回回来，还能回到当时母页面的位置-->
<script>
    $(window).scroll(function () {
        if ($(document).scrollTop() != 0) {
            sessionStorage.setItem("offsetTop", $(document).scrollTop());//保存滚动条位置
        }
    });

    window.onload = function () {
        var offsetTop = sessionStorage.getItem("offsetTop");
        $(document).scrollTop(offsetTop);
    }
</script>


<!--Slider-滑块的JS代码-->
<script>
    $("#slider1").slider(function (percent) {
        console.log(percent);
    });
</script>

<!--这块是日期选择器的代码-->
<script>
    /*
    * 参数名	类型	默认值	说明
      multiple	boolean	false	是否多选， V0.8.1+
      inputReadOnly	boolean	true	是否自动在 input 元素上加上 readonly 属性
      closeByOutsideClick	boolean	true	点击日历外面关闭
      toolbarTemplate	string	参见源码	Toolbar 的HTML结构
      value	array		默认选择的日期，注意是个数组，比如 ["2016-12-12"]
      formatValue	function (p, values)		格式化函数. values 是用户选择的日期
      monthNames	array	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']	月名称
      monthNamesShort	array	['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']	月名称缩写
      dayNames	array	['周日', '周一', '周二', '周三', '周四', '周五', '周六']	周名称
      dayNamesShort	array	['周日', '周一', '周二', '周三', '周四', '周五', '周六']	周名称缩写
      dateFormat	'yyyy-mm-dd'	日期格式
      minDate	undefined	最小可选日期，比如 2015-06-01
      maxDate	undefined	最大可选日期，比如 2015-08-01
      onChange	function(p, values, displayValues){}	当用户选择日期时触发
      closeOnSelect	boolean	true	用户选择一个时间后就自动关闭
      yearPicker	boolean	true	Enable year picker in toolbar
      回调函数
      onChange	function (p, values, displayValues)		Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column
      onMonthAdd	function (p, monthContainer)		Callback function that will be executed when newly generated month HTML element will be added to calendar.
      onDayClick	function (p, dayContainer, year, month, day)		Callback function that will be executed when user clicks/select any date
      onOpen	function (p)		Callback function that will be executed when picker is opened
      onClose	function (p)		Callback function that will be executed when picker is closed


      方法

        通过 $("xxx").calendar("methodname", args) 可以调用method的方法，目前有如下方法可以调用：

        $("#input").calendar("close");  //关闭弹窗
        $("#input").calendar("open");  //打开弹窗
        $("#input").calendar("setValue", ["2012-12-12"]);  //设置日期
        $("#input").calendar("destroy");  //销毁
    * */
    $("#date-picker").calendar();
    $("#date-picker-cn").calendar({
        dateFormat: 'yyyy年mm月dd日'
    });
    $("#date-picker-mulity").calendar({
        value: ['2017-11-15'], /*打开的时候，默认选择的日期*/
        multiple: true,
        inputReadOnly: true,
        maxDate: '2017-11-17',
        minDate: '2017-10-17', /*可以在这里设定日历的其他属性*/
        onClose: function () {/*这个是回调函数*/
            $.alert(1);
        }
    });
    /*
    *内联样式的日期选择
    * */
    $("#date3").calendar({
        container: "#date3",
        input: '#innerline-date'
    })
</script>
</body>
</html>